Skip to content

Conversation

@joseliano
Copy link

<title>Joseliano</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/2.2.2/js/bootstrap.min.js" charset="utf-8"></script>
<script src="https://code.highcharts.com/highcharts.js"></script> 

Formulário

	    				<div class="form-group-attached">
	    					<div class="row">
    							<div class="form-group col-md-6">
    								<label>Browser</label>
    								  <select class="form-control" id="frmSelect" required>
										  <option value="Internet">Internet</option>
										  <option value="Firefox">Firefox</option>
										  <option value="Google">Google</option>
										  <option value="Mozila">Mozila</option>
										  <option value="Outros">Outros</option>
										</select>
    							</div>
	    						
	    					</div>			
	    					<div class="row">
								<div class="form-group col-md-4">
    								<label>valor Minimo</label>
    								<input type="number" name="frmValorMinimo" id="frmValorMinimo" class="form-control" placeholder="Valor Minimo"   required>
    							</div>
    							<div class="form-group col-md-4">
    								<label>valor Máximo</label>
    								<input type="number" name="frmValorMaximo" id="frmValorMaximo" class="form-control" placeholder="Valor Máximo"  required>
    							</div>									
	    					</div>
	    				</div>
	    				<div class="row">
	    					<div class="form-group">		    						 
	    						<button type="button" class="btn btn-primary" onclick="return GerarGRafico()">Salvar</button>  

	    					</div>
	    				</div>		  
						
	    		</div>
	    	</div>
	    </div>
	</div>	  
	
	<div id="grafico" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
	</form>
</div>    
<script async type="text/javascript">

class GerarGrafico {
arSeries = [];
chat = Highcharts.chart('grafico', {
title: {text: 'Desafio'},
xAxis: {tickInterval: 1, type: 'logarithmic' },
yAxis: {type: 'logarithmic', minorTickInterval: 0.1},
tooltip: {headerFormat: '{series.name}
', pointFormat: 'valor = {point.y}' },
chart: {
events: {
addSeries: function () {
var label = this.renderer.label('Adicionando valor ao grafico ', 100, 120)
.attr({
fill: Highcharts.getOptions().colors[0],
padding: 10,
r: 5,
zIndex: 8
})
.css({
color: '#FFFFFF'
})
.add();

						setTimeout(function () {
							label.fadeOut();
						}, 100);

				}
			}
		} 
  });

constructor()
{
}

set Navegador(value) {
this._navegador = value;
}
set valorMinimo(value) {
this._minimo = value;
}
set valorMaximo(value) {
this._maximo = value;
}

Validar() {

if (this._navegador==""){
  alert("Informe um Navegador"); 
  return false;
} 
if (this._minimo==""){
  alert("Informe um valor Minimo"); 
  return false;
}
if (this._maximo==""){
  alert("Informe um valor máximo"); 
  return false;
}
 
	
this.arSeries.push({
					data: [ parseInt(this._minimo),   parseInt(this._maximo)], 
					name: this._navegador
					} 
				 );	 	 

this.addGrafico() 

}

addGrafico(){

	var seriesLength = this.chat.series.length;
	for(var i = seriesLength -1; i > -1; i--) {
        this.chat.series[i].remove();
    }
 
	for (var i=0;i< this.arSeries.length;i++){ 
		this.chat.addSeries ({
								data: this.arSeries[i].data,
								pointStart: 1,
								name: this.arSeries[i].name
							 }
							)
	}

}

}

let grafico = new GerarGrafico();

function GerarGRafico(){
grafico.Navegador= document.getElementById("frmSelect").value;
grafico.valorMinimo= document.getElementById("frmValorMinimo").value;
grafico.valorMaximo= document.getElementById("frmValorMaximo").value;
return grafico.Validar()
}

</script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant